<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <!--单选按钮组 -->
      <el-radio-group v-model="deptTypeRadio" @change="radioChange">
        <el-radio-button label="1">市级</el-radio-button>
        <el-radio-button label="2">区县</el-radio-button>
        <el-radio-button label="4">西咸新区</el-radio-button>
        <el-radio-button label="3">开发区</el-radio-button>
      </el-radio-group>

      <span style="margin-left:20px;font-size:14px;">重点工作:</span>
      <el-cascader
        ref="taskRef"
        class="userIntSize"
        v-model="taskId"
        size="small"
        :options="taskLists"
        :props="taskProp"
        :show-all-levels="false"
        @change="getTaskId"
      ></el-cascader>
      <!-- 
      <el-switch v-model="value1" style="margin-left:10px;" active-text="正序" inactive-text="倒序">
      </el-switch>-->

      <!-- <div class="detail"> -->
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="margin-top:20px">
          <el-table
            :data="tableData5"
            border
            height="600"
            style="overflow-y:auto;"
            :default-sort="{ prop: 'score1'}"
          >
            <el-table-column align="center" type="index" label="序号"></el-table-column>
            <el-table-column prop="departmentName" label="重点工作" width="180"></el-table-column>
            <el-table-column label="一季度">
              <el-table-column prop="score1" label="得分"></el-table-column>
              <el-table-column prop="rank1" label="排名" sortable>
                <template slot-scope="scope">
                  <span class="lightSty">
                    <b>{{ scope.row.rank1 }}</b>
                    <img :src="scope.row.imgUrl1" v-if="scope.row.imgUrl1 != null" />
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="二季度">
              <el-table-column prop="score2" label="得分"></el-table-column>
              <el-table-column prop="rank2" label="排名" sortable>
                <template slot-scope="scope">
                  <span class="lightSty">
                    <b>{{ scope.row.rank2 }}</b>
                    <img :src="scope.row.imgUrl2" v-if="scope.row.imgUrl2 != null" />
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="三季度">
              <el-table-column prop="score3" label="得分"></el-table-column>
              <el-table-column prop="rank3" label="排名" sortable>
                <template slot-scope="scope">
                  <span class="lightSty">
                    <b>{{ scope.row.rank3 }}</b>
                    <img :src="scope.row.imgUrl3" v-if="scope.row.imgUrl3 != null" />
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="全年度">
              <el-table-column prop="score4" label="得分"></el-table-column>
              <el-table-column prop="rank4" label="排名" sortable>
                <template slot-scope="scope">
                  <span class="lightSty">
                    <b>{{ scope.row.rank4 }}</b>
                    <img :src="scope.row.imgUrl4" v-if="scope.row.imgUrl4 != null" />
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- <el-pagination 
        background 
        layout="prev, pager, next" 
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
         @current-change="handleCurrentChange">
      </el-pagination>-->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deptTypeRadio: "1",
      deptType: "市级",
      tableHtml: "",
      value1: true,
      pageSize: 14,
      currentPage: 1,
      total: 0,
      textcurr: [],
      headTop: [],
      taskLists: [],
      taskId: "",
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
      },
      tableData5: [],
      thirdHead: [
        { name: "一季度" },
        { name: "二季度" },
        { name: "三季度" },
        { name: "四季度" },
      ],
      fourthHead: [
        { name: "得分", prop: "caveat" },
        { name: "排名", prop: "oneQuarterRank" },
        { name: "预警亮灯", prop: "oneQuarterScore" },
      ],
    };
  },
  mounted() {
    // this.getListByPage(this.deptTypeRadio);
    this.getTaskList();
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    // 时刻获取十项重点工作
    getTaskId(val) {
      if (val) {
        this.taskId = this.$refs["taskRef"].getCheckedNodes()[0].value;
        let _val = val;
        console.log(_val);
        if (!Array.isArray(_val)) {
          _val = [_val];
        }
        this.taskId = _val[_val.length - 1];
        this.getListByPage();
      }
    },
    tableData() {
      const result = this.tableData1.map((item) => {
        const row = {};
        row.name = item.name;
        row.id = item.id;
        item.deptTasks.forEach((task, index) => {
          const keys = Object.keys(task);
          keys.forEach((key) => {
            row[key + index] = task[key];
          });
        });
        return row;
      });
      return result;
    },
    headData() {
      let sort = 0;
      const result = this.headData1.map((item1) => {
        const col1 = JSON.parse(JSON.stringify(item1));
        col1.sort = sort;
        if (item1.children && item1.children.length) {
          col1.children = item1.children.map((item2) => {
            const col2 = JSON.parse(JSON.stringify(item2));
            col2.sort = sort;
            sort += 1;
            return col2;
          });
        }
        sort += 1;
        return col1;
      });
      return result;
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getAllList")
        .then((res) => {
          console.log(res, 999);
          res.data.map((item) => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
            // this.tasksList = res.data;
            this.taskLists = res.data;
          });
        })
        .catch((err) => {});
    },
    // 获取列表
    getListByPage() {
      if (this.taskId == "") {
        this.tableData5 = [];
        return;
      }

      this.$axios
        .post("/deptTask/getDeptScoreList", {
          taskId: this.taskId,
          departmentTypeId: this.deptTypeRadio,
        })
        .then((res) => {
          this.tableData5 = res.data;
          this.tableData5.forEach((item, index) => {
            // 第一季度
            if (item.caveat1 == 1) {
              item.imgUrl1 = require("../../assets/img/redFlag.png");
            } else if (item.caveat1 == 0) {
              item.imgUrl1 = require("../../assets/img/yellowLight.png");
            } else {
              item.imgUrl1 = null;
            }
            // 第二季度
            if (item.caveat2 == 1) {
              item.imgUrl2 = require("../../assets/img/redFlag.png");
            } else if (item.caveat2 == 0) {
              item.imgUrl2 = require("../../assets/img/yellowLight.png");
            } else {
              item.imgUrl2 = null;
            }
            // 第三季度
            if (item.caveat3 == 1) {
              item.imgUrl3 = require("../../assets/img/redFlag.png");
            } else if (item.caveat3 == 0) {
              item.imgUrl3 = require("../../assets/img/yellowLight.png");
            } else {
              item.imgUrl3 = null;
            }
            // 第四季度
            if (item.caveat4 == 1) {
              item.imgUrl4 = require("../../assets/img/redFlag.png");
            } else if (item.caveat4 == 0) {
              item.imgUrl4 = require("../../assets/img/yellowLight.png");
            } else {
              item.imgUrl4 = null;
            }
          });
        })
        .catch((err) => {});
    },
    radioChange(val) {
      this.getListByPage();
      if (val == 1) {
        this.deptType = "市级";
      } else if (val == 2) {
        this.deptType = "区县";
      } else if (val == 3) {
        this.deptType = "开发区";
      } else if (val == 4) {
        this.deptType = "西咸新区";
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getListByPage(this.deptTypeRadio);
    },
  },
};
</script>
<style scoped>
.tableBox {
  width: 100%;
  height: 700px;
  overflow-x: auto;
}
.detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  height: 600px;
}
.lightSty > b {
  display: inline-block;
  font-weight: 500;
}
</style>
<style>
.tableStyle .el-table__empty-block {
  display: none;
}
</style>
